<template>
  <div class="markerEdt">
    <div class="markerEdt-top">
      <span>
        标签管理
      </span>
      <el-popover
          class="markerEdt-help"
          placement="top-end"
          title="帮助说明"
          width="250"
          trigger="click"
          content="配置好参数后，点击新增标签按钮，然后在模型内鼠标左键点击即可。需要注意，想要显示牵引线之前牵引线粗细不应该为0！">
        <el-button slot="reference"><i class="ri-question-line"></i></el-button>
      </el-popover>
    </div>
    <div class="markerEdt-divider">
      <el-divider>
        <i class="ri-pencil-line"></i>
      </el-divider>
    </div>
    <div class="markerEdt-data">
      <el-form ref="markerEdtData" :model="markerEdtObj" label-width="120px">
        <el-form-item label="标签ID" class="marker-select">
          <el-select v-model="markerIndex" placeholder="请选择" @change="changeMarker">
            <el-option
                v-for="(item,index) in markerLists"
                :key="item.id"
                :label="'标签'+(index+1)"
                :value=index>
            </el-option>
          </el-select>
          <el-button @click="focusMarker">定位</el-button>
        </el-form-item>
        <el-form-item label="标签可视范围">
          <el-input-number v-model="markerEdtObj.range[0]" :step="10" :max="2000" :min="1"></el-input-number>
          <el-input-number v-model="markerEdtObj.range[1]" :step="100" :max="1000000" :min="3000"></el-input-number>
        </el-form-item>
        <el-form-item label="标签文本" class="marker-text">
          <el-input v-model="markerEdtObj.text" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="文本可视范围">
          <el-input-number v-model="markerEdtObj.textRange[0]" :step="10" :max="2000" :min="1"></el-input-number>
          <el-input-number v-model="markerEdtObj.textRange[1]" :step="100" :max="100000" :min="3000"></el-input-number>
        </el-form-item>
        <el-form-item label="文字展开动画">
          <el-switch v-model="markerEdtObj.useTextAnimation"></el-switch>
        </el-form-item>
        <el-form-item label="字体大小">
          <el-input-number v-model="markerEdtObj.fontSize" :step="1" :min="8" :max="40"></el-input-number>
        </el-form-item>
        <el-form-item label="字体颜色" class="color">
          <el-color-picker color-format="rgb" v-model="markerEdtObj.fontColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="字体轮廓大小">
          <el-input-number v-model="markerEdtObj.fontOutlineSize" :step="0.1" :min="0" :max="50"></el-input-number>
        </el-form-item>
        <el-form-item label="字体轮廓颜色">
          <el-input-number v-model="markerEdtObj.fontOutlineColor" :step="0.1" :min="0" :max="50"></el-input-number>
        </el-form-item>
        <el-form-item label="文本背景颜色" class="color">
          <el-color-picker color-format="rgb" v-model="markerEdtObj.textBackgroundColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="显示牵引线">
          <el-switch v-model="markerEdtObj.showLine"></el-switch>
        </el-form-item>
        <el-form-item label="牵引线宽高">
          <el-input-number v-model="markerEdtObj.lineSize[0]" :step="1" :max="50" :min="0"></el-input-number>
          <el-input-number v-model="markerEdtObj.lineSize[1]" :step="1" :max="300" :min="0"></el-input-number>
        </el-form-item>
        <el-form-item label="牵引线颜色" class="color">
          <el-color-picker color-format="rgb" v-model="markerEdtObj.lineColor"></el-color-picker>
        </el-form-item>
        <el-form-item label="是否遮挡剔除">
          <el-switch v-model="markerEdtObj.occlusionCull"></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div class="markerEdt-btn">
      <el-button @click="selectMarkerEdt()">新增标签</el-button>
      <el-button @click="delMarkerEdt()">删除</el-button>
      <el-button @click="closeMarkerEdt()">关闭</el-button>
      <el-button @click="edtMarkerEdt()">编辑保存</el-button>
    </div>
  </div>
</template>
<style lang="scss">
@import '@/css/markerEdt/markerEdt';
</style>
<script>
/* eslint-disable */
import "remixicon/fonts/remixicon.css";

export default {
  name: "markerEdt",
  props: {
    markerLists: {
      type: Array,
    },
    markerIds: {
      type: Array,
    },
  },
  data() {
    return {
      markerIndex: null,
      markerEdtObj: {
        id: null,
        range: [10, 100000],
        text: "",
        textRange: [100, 60000],
        useTextAnimation: true,
        fontSize: 24,
        fontColor: 'rgb(0,0,0)',
        fontOutlineSize: 0,
        fontOutlineColor: 'rgb(0,0,0)',
        textBackgroundColor: 'rgb(255,255,255)',
        showLine: true,
        lineSize: [1, 100],
        lineColor: 'rgb(255,255,255)',
        occlusionCull: false,
      },
    }
  },
  methods: {
    focusMarker() {
      if (this.markerEdtObj.id) {
        __g.marker.focus(this.markerEdtObj.id, 50, 2)
      } else {
        this.$message.warning("未选择对象")
      }
    },
    selectMarkerEdt() {
      this.$emit('add-marker');
    },
    changeMarker() {
      let fontColor = this.normalizedRGBToRGBString(this.markerLists[this.markerIndex].fontColor)
      let fontOutlineColor = this.normalizedRGBToRGBString(this.markerLists[this.markerIndex].fontOutlineColor)
      let textBackgroundColor = this.normalizedRGBToRGBString(this.markerLists[this.markerIndex].textBackgroundColor)
      let lineColor = this.normalizedRGBToRGBString(this.markerLists[this.markerIndex].lineColor)
      this.markerEdtObj = {
        id: this.markerLists[this.markerIndex].id,
        range: this.markerLists[this.markerIndex].range,
        text: this.markerLists[this.markerIndex].text,
        textRange: this.markerLists[this.markerIndex].textRange,
        useTextAnimation: this.markerLists[this.markerIndex].useTextAnimation,
        fontSize: this.markerLists[this.markerIndex].fontSize,
        fontColor: fontColor,
        fontOutlineSize: this.markerLists[this.markerIndex].fontOutlineSize,
        fontOutlineColor: fontOutlineColor,
        textBackgroundColor: textBackgroundColor,
        showLine: this.markerLists[this.markerIndex].showLine,
        lineSize: this.markerLists[this.markerIndex].lineSize,
        lineColor: lineColor,
        occlusionCull: this.markerLists[this.markerIndex].occlusionCull,
      }
    },
    async addMarkerEdt(coordinate) {
      const timestamp = new Date().getTime();
      let id = 'marker' + timestamp
      let obj = {
        id: id,
        coordinate: coordinate,
        coordinateType: 0,
        range: this.markerEdtObj.range,
        text: this.markerEdtObj.text,
        textRange: this.markerEdtObj.textRange,
        useTextAnimation: this.markerEdtObj.useTextAnimation,
        fontSize: this.markerEdtObj.fontSize,
        fontColor: this.markerEdtObj.fontColor,
        fontOutlineSize: this.markerEdtObj.fontOutlineSize,
        fontOutlineColor: this.markerEdtObj.fontOutlineColor,
        textBackgroundColor: this.markerEdtObj.textBackgroundColor,
        showLine: this.markerEdtObj.showLine,
        lineSize: this.markerEdtObj.lineSize,
        lineColor: this.markerEdtObj.lineColor,
        occlusionCull: this.markerEdtObj.occlusionCull,
      }
      this.markerLists.push(obj)
      this.markerIndex = this.markerLists.length - 1
      this.markerIds.push(id)
      await __g.marker.add(obj);
      this.markerEdtObj.id = id
    },
    delMarkerEdt() {
      if (this.markerEdtObj.id) {
        __g.marker.delete(this.markerEdtObj.id);
        this.markerLists.splice(this.markerIndex, 1)
        this.markerIds.splice(this.markerIndex, 1)
        if (this.markerLists.length !== 0) {
          this.markerIndex = this.markerLists.length - 1
          this.changeMarker()
        } else {
          this.reloadMarker()
        }
      } else {
        this.$message.warning("未选择删除的对象")
      }
    },
    closeMarkerEdt() {
      this.$emit('close-popup');
      this.reloadMarker()
    },
    async edtMarkerEdt() {
      this.$message.warning("开发中")
    },
    reloadMarker() {
      this.markerIndex = null
      this.markerEdtObj = {
        id: null,
        range: [10, 100000],
        text: "",
        textRange: [100, 60000],
        useTextAnimation: true,
        fontSize: 24,
        fontColor: 'rgb(0,0,0)',
        fontOutlineSize: 0,
        fontOutlineColor: 'rgb(0,0,0)',
        textBackgroundColor: 'rgb(255,255,255)',
        showLine: true,
        lineSize: [1, 100],
        lineColor: 'rgb(255,255,255)',
        occlusionCull: false,
      }
    },
    extractRGBComponents(colorString) {
      let rgbRegExp = /rgb\((\d+),\s*(\d+),\s*(\d+)\)/;
      let match = colorString.match(rgbRegExp);
      if (match) {
        return [parseInt(match[1]) / 255, parseInt(match[2]) / 255, parseInt(match[3]) / 255];
      } else {
        return null;
      }
    },
    normalizedRGBToRGBString(color) {
      console.log(color)
      let r = Math.round(color[0] * 255)
      let g = Math.round(color[1] * 255)
      let b = Math.round(color[2] * 255)
      let color3 = 'rgb(' + r + ',' + g + ',' + b + ')'
      console.log(color3)
      let color2 = `rgb(${r},${g},${b})`
      console.log(color2)
      return color2
    }
  },
  mounted() {

  },
};
</script>